<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { useProductStore } from "@/stores";

  const productStore = useProductStore();
  const modalVisible = ref(false);
  const products = ref<any>([]);
  const product = ref<any>({});

  onMounted(() => {
    fetchList();
  });

  async function fetchList() {
    products.value = await productStore.getProductList();
  }

  function handleAdd() {
    product.value = {};
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    product.value = record;
    modalVisible.value = true;
  }

  async function handleRemove(record: any) {
    await productStore.deleteProduct({ id: record.id });
    products.value = products.value.filter((item: any) => item.id !== record.id);
  }

  async function handleSave() {
    await productStore.saveProduct({ ...product.value });
    modalVisible.value = false;
    fetchList();
  }
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['商品管理', '商品列表']"></Breadcrumb>
    <a-card :bproducted="false">
      <a-button type="primary" size="small" style="margin-bottom: 16px" @click="handleAdd">新增</a-button>
      <a-table :data="products">
        <template #columns>
          <a-table-column title="商品主图" :width="100">
            <template #cell="{ record }">
              <a-image :src="record.cover?.url" :width="80" :height="80"></a-image>
            </template>
          </a-table-column>
          <a-table-column title="商品编号" data-index="code" />
          <a-table-column title="商品名称" data-index="name" />
          <a-table-column title="商品状态" data-index="statusValue" />
          <a-table-column title="商品原价" data-index="price" />
          <!-- <a-table-column title="创建时间" data-index="createdAt" :width="180" />
          <a-table-column title="更新时间" data-index="updatedAt" :width="180" /> -->
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
                <a-popconfirm content="您确认移除此问题么？" @ok="handleRemove(record)">
                  <a-button type="primary" size="small" status="danger">移除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" title="商品信息" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="商品主图">
          <a-input placeholder="请输入商品主图" v-model="product.label"></a-input>
        </a-form-item>
        <a-form-item label="商品名称">
          <a-input placeholder="请输入商品名称" v-model="product.name"></a-input>
        </a-form-item>
        <a-form-item label="商品状态">
          <a-input placeholder="请输入商品状态" v-model="product.statusValue"></a-input>
        </a-form-item>
        <a-form-item label="商品原价">
          <a-input placeholder="请输入商品原价" v-model="product.price"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
